<template>
  <div class="home" v-if="showMe">
    <top></top>
    <banner></banner>
    <header></header>
    <!-- 推荐商家列表 -->
    <div>
      <OneBusiness v-for="n in getFalseBussinessbrief" :a="n"></OneBusiness>
    </div>

    <footernav></footernav>

  </div>
</template>

<script>
  import banner from './../components/home/index_banner.vue'
  import top from './../components/home/top.vue'
  import footernav from './../components/commonality/footer_nav.vue'
  import OneBusiness from './../components/home/one_business.vue'
  import { mapGetters } from 'vuex';

  export default{
    //父组件传入的数据
    props: {} ,
    components: {
      top ,
      banner,
      footernav,
      OneBusiness
    } ,
    //本地数据
    data(){
      return {
        isLoadingMore: false,
        showMe:false
      }
    } ,
    //方法
    methods: {
      //跳转到搜索
      enter_search (e) {
        this.$router.push('/search/' + this.search_word);
      },
      // 加载更多
      loadMore () {
        // 大于十五条不加载
        if (this.getFalseBussinessbrief.length > 15) return;
        this.$store.dispatch('setLoading', true);
        if (!this.isLoadingMore) { // 是否加载中
          this.isLoadingMore = true;
          setTimeout(() => {
            this.$store.dispatch('setLoading', false);
            if (this.getFalseBussinessbrief.length <= 15) {
              this.$store.dispatch('setHomepageMore', [...this.getFalseBussinessbrief, ...(this.getFalseBussinessbrief).slice(0, 5)]);

            }
            this.isLoadingMore = false;
          }, 1000);
        }
      },
      // 触发加载更多
      dispatchLoad () {
        var dscrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (document.documentElement.offsetHeight <= (dscrollTop + window.innerHeight + 1)) {
          console.info('触发加载');
          this.loadMore();
        }
      }
    } ,
    //进入页面加载
    mounted () {
      // 设置当前状态为加载中
      this.$store.dispatch('setLoading', true);
      // 模拟请求等待
      var time = Math.floor(Math.random() * 2000);
      console.log('模拟加载用时' + time);
      setTimeout(() => {
        // 页面显示
        this.$store.dispatch('setLoading', false);
        this.showMe = true;
      }, time);
      setTimeout(() => {
        window.addEventListener('scroll', this.dispatchLoad, false);
      }, 0);
    },
    beforeDestroy () {
      window.removeEventListener('scroll', this.dispatchLoad, false);
    },
    //计算属性
    computed: {
      ...mapGetters([
        'getFalseBussinessbrief' // 商家简略信息
      ])
    } ,
    //监控数据变化
    watch: {}

  }
</script>

<style lang="less" scoped>

  .home {
    padding-bottom: .5rem;
  }
</style>
